import * as echarts from "echarts";
import "echarts-liquidfill";

const options = {
  option1: {
    title: {
      text: "Monthly Data",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: "value",
      splitLine: { show: false },
    },
    series: [
      {
        name: "Monthly Data",
        type: "bar",
        barWidth: "10",
        data: [10, 20, 30, 40, 50, 60, 70],
        itemStyle: {
          color: "#5B8FF9",
          opacity: 0.8,
          barBorderRadius: [5, 5, 0, 0],
        },
      },
    ],
  },
  option2: {
    // backgroundColor: "black",
    title: [
      {
        text: `{a|${0.84 * 100}%}`,
        subtext: "压铸车间",
        top: "center",
        left: "center",
        subtextStyle: {
          color: "#fff",
          fontSize: 23,
          fontWeight: 600,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: -10, //主副标题间距
        textStyle: {
          fontWeight: "normal",
          rich: {
            a: {
              padding: [0, 0, 70, 0],
              fontWeight: "normal",
              fontSize: 36,
              color: "#fff",
              fontFamily: "DINAlternate-Bold",
              textShadow: [5, 5, 10, "#7ff06fff"],
            },
          },
        },
      },
    ],
    angleAxis: {
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      min: 0,
      max: 100,
      boundaryGap: ["1000", "100"],
    },
    radiusAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: ["a", "b", "c"],
      z: 10,
    },
    polar: {
      radius: "100%",
    },
    series: [
      {
        type: "bar",
        data: [, , 0.84 * 100], //修改数据
        coordinateSystem: "polar",
        barMaxWidth: 20,
        z: 2,
        name: "",

        color: "#1779ee",
        barGap: "-100%",
      },
      {
        type: "bar",

        data: [, , 100],
        coordinateSystem: "polar",
        barMaxWidth: 20,
        z: -2,
        name: "",

        color: "#f0f0f0",
        barGap: "-100%",
      },
      {
        type: "liquidFill",
        radius: "70%",
        center: ["50%", "50%"],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(2, 159, 200, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(0, 186, 211, .5)",
              },
              {
                offset: 0,
                color: "rgba(0, 230, 220, 1)",
              },
            ],
          },
        ],
        data: [0.84, 0.84 - 0.1, 0.84 - 0.15], // data个数代表波浪数
        // monitor: [value],
        backgroundStyle: {
          borderWidth: 1,
          borderColor: "rgba(255, 255, 255, 0)",
          color: "rgba(255, 255, 255, 0)",
        },
        outline: {
          show: false,
        },
        label: {
          show: false,
        },
      },
    ],
    tooltip: {
      show: false,
    },
  },
  option3: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
          },
        },
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        data: ["枪支", "警车", "警摩", "船只", "电台", "警务通", "执法仪"],
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
          },
        },
        splitLine: { show: false },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: "rgba(193, 207, 220, 1)",
        //     // type: 'dashed'
        //   },
        // },
      },
    ],
    series: [
      {
        name: "装备情况",
        type: "bar",
        barMaxWidth: 10,
        // barGap: "10%", //
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(89,136,173)",
              },
              {
                offset: 1,
                color: "#163d60",
              },
            ]),
            label: {
              show: false,
            },
            barBorderRadius: [5, 5, 0, 0], //圆角大小
          },
        },
        data: [434, 254, 134, 734, 411, 456, 456],
      },
    ],
  },
  option4: {
    // backgroundColor: "#062544",
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
    },
    animation: false,
    xAxis: [
      {
        type: "category",
        data: [
          "开关电源",
          "铅酸电池",
          "UPS设备",
          "普通空调",
          "机房环境",
          "智能电表",
        ],
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          margin: 30,
        },
        interval: 1,
      },
    ],
    yAxis: [
      {
        show: true,
        type: "value",
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: "上部圆",
        type: "pictorialBar",
        silent: true,
        symbolSize: [10, 5],
        symbolOffset: [0, -3],
        symbolPosition: "end",
        z: 12,
        label: {
          normal: {
            show: true,
            position: "top",
            // fontSize: 15,
            fontWeight: "bold",
            color: "#3c5bf7",
          },
        },
        color: "#3c5bf7",
        data: [22, 52, 55, 12, 35, 44],
      },
      {
        name: "底部圆",
        type: "pictorialBar",
        silent: true,
        symbolSize: [10, 5],
        symbolOffset: [0, 7],
        z: 12,
        color: "#3c5bf7",
        data: [22, 52, 55, 12, 35, 44],
      },
      {
        name: "内层波浪",
        type: "pictorialBar",
        silent: true,
        symbolSize: [10, 5],
        symbolOffset: [0, 6],
        z: 10,
        itemStyle: {
          normal: {
            color: "transparent",
            borderColor: "#3c5bf7",
            borderType: "solid",
            borderWidth: 8,
          },
        },
        data: [22, 52, 55, 12, 35, 44],
      },
      {
        name: "外层波浪",
        type: "pictorialBar",
        silent: true,
        symbolSize: [10, 5],
        symbolOffset: [0, 9],
        z: 10,
        itemStyle: {
          normal: {
            color: "transparent",
            borderColor: "rgba(91,252,244,0.5)",
            borderType: "solid",
            borderWidth: 5,
          },
        },
        data: [22, 52, 55, 12, 35, 44],
      },
      {
        name: "设备数量",
        type: "bar",
        barWidth: "10",
        barGap: "10%", // Make series be overlap
        barCateGoryGap: "10%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color: "rgba(210,210,210,0.3)",
              },
              {
                offset: 1,
                color: "#3c5bf7",
              },
            ]),
            opacity: 0.8,
          },
        },
        data: [22, 52, 55, 12, 35, 44],
      },
    ],
  },
};

export default options;
